<template>
  <router-view>
    <find-header v-show="footerIndex == 0"></find-header>
    <shops-header v-show="footerIndex == 1"></shops-header>

    <find v-show="footerIndex == 0"></find>
    <shops v-show="footerIndex == 1"></shops>
    <me v-show="footerIndex == 2"></me>

    <app-footer :list="footerItems" :index="footerIndex" @switch="switchFooter"></app-footer>
  </router-view>
</template>

<script>
import Find from './Find'
import FindHeader from './FindHeader'
import Shops from './Shops'
import ShopsHeader from './ShopsHeader'
import Me from './Me'

import imgFind from '@/assets/img/find.png'
import imgFindFill from '@/assets/img/find-fill.png'
import imgShop from '@/assets/img/shop.png'
import imgShopFill from '@/assets/img/shop-fill.png'
import imgMe from '@/assets/img/me.png'
import imgMeFill from '@/assets/img/me-fill.png'

export default {
  data () {
    return {
      footerIndex: 0,
      footerItems: [
        { img: imgFind, imgFilled: imgFindFill, label: '发现' },
        { img: imgShop, imgFilled: imgShopFill, label: '体验店' },
        { img: imgMe, imgFilled: imgMeFill, label: '我的' }
      ]
    }
  },
  computed: {
    title () {
      return [
        '活动',
        '体验店',
        '个人中心'
      ][this.footerIndex]
    }
  },
  methods: {
    switchFooter (i) {
      this.footerIndex = i
      document.title = this.title
    }
  },
  components: {
    Find,
    FindHeader,
    Shops,
    ShopsHeader,
    Me
  }
}
</script>
